import { defineComponent, onMounted, reactive } from 'vue'
import { ElCard, ElIcon, ElRow, ElCol, ElLink } from 'element-plus'
import { Close } from '@element-plus/icons-vue'
import { useStore } from 'vuex'
import styles from './index.module.scss'
import SaasTitle from '~/components/SaasTitle'

export default defineComponent({
  name: 'DeviceInfo',
  props: ['deviceId', 'close'],
  emits: ['markerLayer'],
  setup(props, { emit }) {
    const store = useStore()
    const state = reactive<any>({
      info: {}
    })
    const index = async () => {
      try {
        const { data } = await store.dispatch('manholes/ManholeMapGetDeviceInfoGet', {
          id: props.deviceId
        })
        state.info = data

        store.dispatch('runmap/GetrunStatus', data.runStatus)
        emit('markerLayer', data)
      } catch (error) {}
    }
    //  关闭
    const handleClose = () => {
      props.close()
    }
    onMounted(() => {
      index()
    })

    return () => (
      <ElCard
        class={styles['home-info']}
        v-slots={{
          header: () => (
            <div class="card-header">
              <div>
                {state.info?.name}
                &nbsp;&nbsp;
                {state.info?.onlineState === 1 && (
                  <span style="color: rgb(80, 251, 74);">在线</span>
                )}
                {state.info?.onlineState === 2 && (
                  <span style="color: rgb(195, 195, 195);">离线</span>
                )}
                {state.info?.onlineState === 0 && (
                  <span style="color: rgb(195, 195, 195);">未激活</span>
                )}
              </div>
              <div class="card-right" onClick={handleClose}>
                <span class="card-right-run">
                  {state.info?.runStatus === 1 && (
                    <span style="color: rgb(80, 251, 74);">正常</span>
                  )}
                  {state.info?.runStatus === 2 && (
                    <span style="color: rgb(248, 81, 81);">故障</span>
                  )}
                  {state.info?.runStatus === 0 && (
                    <span style="color: rgb(248, 81, 81);">故障</span>
                  )}
                </span>
                <ElIcon>
                  <Close />
                </ElIcon>
              </div>
            </div>
          )
        }}
      >
        <ElRow>
          <ElCol span={12}>设备编号：{state.info?.code}</ElCol>
          <ElCol span={12}>设备类型：{state.info?.type === 1 ? '水务井盖' : '电缆井盖'}</ElCol>
        </ElRow>
        <div style="height: 10px;"></div>
        <ElRow>
          <ElCol span={12}>所属工区：{state.info?.areaName}</ElCol>
          <ElCol span={12}>设备型号：{state.info?.modelName}</ElCol>
        </ElRow>
        <div style="height: 10px;"></div>
        <ElRow>
          <ElCol span={24}>设备地址：{state.info?.address}</ElCol>
        </ElRow>
        <div style="margin: 16px 0;border-top: 1px solid #ECECEC;"></div>
        <SaasTitle type="primary">
          <ElLink underline={false} class={styles['edit-title']}>
            工况数据
          </ElLink>
        </SaasTitle>
        <div style="height: 10px;"></div>
        <ElRow>
          <ElCol span={24}>温度：{state.info?.dataVO?.temp}</ElCol>
        </ElRow>
        <div style="height: 10px;"></div>
        <ElRow>
          <ElCol span={24}>气体浓度：{state.info?.dataVO?.gasConcent}</ElCol>
        </ElRow>
        <div style="height: 10px;"></div>
        <ElRow>
          <ElCol span={24}>角度：{state.info?.dataVO?.angle}</ElCol>
        </ElRow>
        <div style="height: 10px;"></div>
        <ElRow>
          <ElCol span={24}>颠簸：{state.info?.dataVO?.bumpCount}</ElCol>
        </ElRow>
        <div style="height: 10px;"></div>
        <ElRow>
          <ElCol span={24}>水浸：{state.info?.dataVO?.floodState === 1 ? '水浸' : '正常'}</ElCol>
        </ElRow>
        <div style="height: 10px;"></div>
        <ElRow>
          <ElCol span={24}>
            开盖：{state.info?.dataVO?.manholecoverState === 1 ? '打开' : '关闭'}
          </ElCol>
        </ElRow>
        <div style="height: 10px;"></div>
        <ElRow>
          <ElCol span={24}>更新时间：{state.info?.dataVO?.updateTime}</ElCol>
        </ElRow>
      </ElCard>
    )
  }
})
